<template>
    <div id="container" style="height: 300px" class="comp-coin-finance-trend"></div>
</template>

<script type="text/babel">
    import service from '../../service';
    import {LANG, LOCAL,PRECISION} from '../../../../../grsc-base/util/lang';
    import filter from '../../../../../grsc-base/util/filter';
    import lib from '../../../../../src/common/lib'

    const PROFIT_PRECISION = 4;
    export default {
        props:{
            symbol:{
                default:'USDT_SMCF1'
            },
            klineData:{}
        },
        data() {
            return {
                filter:filter,
                price:[],
                oChart : null
            };
        },

        watch:{
            klineData(newval,oldval){
                this.localData();
            }
        },

        created() {
            this.initGraph();
            this.localData();
        },

        methods: {

            initGraph(){
                this.oChart&&this.oChart.showLoading();
            },

            localData(){
                this.price = this.klineData;
                setTimeout(()=>{
                    this.highcharts_Rendering();
                },0)
            },


            highcharts_Rendering() {
                let that = this;
                if(!this.price){
                    return
                }
                let ceiling = that.price[that.price.length-1]&&that.price[that.price.length-1][1];

                let flagTitle =  that.price[this.price.length-1] && filter.floorFixPrice(that.price[this.price.length-1][1], PROFIT_PRECISION);
                let flagx = that.price[this.price.length-1]  && that.price[that.price.length-1][0];

                Highcharts.setOptions({global: {useUTC: true,timezoneOffset:lib.getCurrentTimezone()*60}});

                $('#container').highcharts({
                    chart: {
                        backgroundColor: '#ffffff',
                        space:[24, 0, 0, 0]
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        type: 'datetime',
                        lineWidth:0,
                        tickColor:'#9f9f9d',
                        tickLength:4,
                        labels: {
                            style: {color: '#9f9f9d'}
                        },
                        dateTimeLabelFormats: {
                            hour:'%H:%M',
                            day: '%m-%d',
                            week: '%m-%d',
                            month: '%m-%d'
                        }
                    },
                    tooltip: {
                        dateTimeLabelFormats: {
                            millisecond: '%Y-%m-%d:%H:%M:%S.%L',
                            second: '%Y-%m-%d %H:%M:%S',
                            minute: '%Y-%m-%d %H:%M',
                            hour: '%H:%M',
                            day: '%Y-%m-%d',
                            week: '%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        },
                        useHTML: true,
                        formatter: function (a,b,c) {
                            let series = this.series;
                            let name = that.$t('common.comp.price');
                            if(series.name === name){
                                return `<p style="font-size: 12px">${  Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x)}</p>
                                    <p><span style="background-color:#75aee4;display:inline-block;padding: 4px;margin-right:4px;border-radius: 50%"></span>
                                        ${name} ${filter.floorFixPrice(this.y, PROFIT_PRECISION)}</p>`
                            }
                        }
                    },
                    yAxis: [{
                        top:'0%',
                        labels: {
                            style: {color: '#9f9f9d'},
                            formatter: function () {
                                return filter.floorFixPrice(this.value, PROFIT_PRECISION);
                            }
                        },
                        title: {text: null},
                        gridLineWidth: 1,
                        gridLineDashStyle:'ShortDash',
                        gridLineColor:'#fafafa',
                        opposite:true,
                        offset:40,
                        floor:1,
                        ceiling:ceiling
                    }],
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        areaspline:{
                            lineColor:'#75aee4',
                            lineWidth:2,
                            color:'#d8e8f7',
                            states:{
                                hover:{
                                    lineWidth:2
                                }
                            },
                            marker:{
                                radius:0,
                                fillColor:'#95a4ae'
                            }
                        },

                        flags:{
                            states:{
                                hover:{
                                    color:'transparent',
                                    fillColor:'transparent'
                                }
                            }
                        }
                    },
                    series: [
                        {
                            type: 'areaspline',
                            id:'price',
                            name: that.$t('common.comp.price'),
                            data: that.price
                        },
                        {
                            type : 'flags',
                            name:'flag',
                            onSeries:'price',
                            color:'transparent',
                            useHTML:true,
                            className:'coin-fiance-trend-flag',
                            data:[
                                {
                                    fillColor:'transparent',
                                    title:flagTitle,
                                    x:flagx
                                }
                            ],
                            style:{
                                border:0,
                                color: '#5cb5e6'
                            }
                        }
                    ]
                });

            }
        }
    }

</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-coin-finance-trend{
        .text{
            text-align: center;
            font-size: 24px;
            color:#95a4ae;
            transform: translate(0,120px);

        }

        .coin-fiance-trend-flag{
            transform: translate(0,10px);
        }
    }



</style>